<template>
	
	<view class="main">
		<uni-card>
			
				<button class="tuichu-button">
					<image class="tuichupng" src="../../static/yuyuejilu/tuichu.png"></image>
				</button>
				<image  v-if="!isLoggedIn" class="touxiangpng" src="../../static/yuyuejilu/moren.png"></image>
				<image v-else class="touxiangpng" src="../../static/yuyuejilu/success.png"></image>
				<button v-if="!isLoggedIn" class="denglu-button"  @click="handleLogin">
					点击登录
				</button>
				
				<button v-else class="denglu-button" @click="logout">
					退出登录
				</button>
				
				<text class="huanying-text">欢迎来到袁隆平杂交水稻科学园</text>
			
		</uni-card>
		
		<uni-card>
			<uni-row>
				<uni-col span="20">
					<text class="yuyue-text">
						预约记录
					</text>
				</uni-col>
				<uni-col span="4">
					<button class="nextpage-button" @click="showRecords">
						<image class="nextpagepng" src="../../static/yuyuejilu/nextpage.png"></image>
					</button>
				</uni-col>
			</uni-row>
				
			
			<image class="imgpng" src="../../static/yuyuejilu/img.png"></image>
			<view class="yuyuejishu">
				<text class="yuyuejilu-text">暂无预约记录</text>
			</view>
			
		</uni-card>
		<view class="jishu">
			<text class="jishu-text">技术支持：中北大学软件学院</text>
		</view>
		
	</view>
</template>

<script >
	export default {
	  data() {
	    return {
	      isLoggedIn: false // 初始状态为未登录
	    }
	  },
	  methods: {
	    handleLogin() {
	      // 登录逻辑...
	      uni.showToast({
	        title: '登录成功',
	        icon: 'success',
	        duration: 2000
	      });
	      this.isLoggedIn = true; // 更新登录状态
	      setTimeout(() => {
	        uni.switchTab({
	          url: '/pages/shouye/shouye'
	        });
	      }, 2000);
	    },
	    logout() {
	      // 登出逻辑...
	      this.isLoggedIn = false; // 更新登录状态
	      uni.showToast({
	        title: '已退出登录',
	        icon: 'none',
	        duration: 2000
	      });
	    },
	    showRecords() {
	      // 显示预约记录的逻辑...
	    }
	  }
	}
</script>

<style scoped>
	.tuichu-button{
		height: 35px;
		width: 12px;
		margin-top: -10px;
		margin-left: 280px;
		background-color: unset;
		
	}
	.tuichupng{
		width: 18px;
		height: 18px;
		margin-left: -6px;
	}
	.touxiangpng{
		width: 50px;
		height: 50px;
		opacity: 100;
		margin-left: 130px;
		margin-top: -10px;
		margin-bottom: 5px;
	}
	.denglu-button{
		border-color: white;
		background-color: unset;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		font-size: 15px;
		color: #000000;
		letter-spacing: 0;
		margin-bottom: 5px;
		
	}
	.huanying-text{
		opacity: 0.75;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		font-size: 12px;
		color: #323232;
		letter-spacing: 0;
		margin-left: 65px;
	}
	.yuyue-text{
		font-family: PingFangSC-Medium;
		font-weight: 500;
		font-size: 15px;
		color: #323232;
		letter-spacing: 0;
		margin-top: 0%;
		
	}
	
	.nextpage-button{
		margin-top: -10px;
		margin-right: 1px;
		background-color: unset;
		width: 5px;
		height: 30px;
		
	}

	.nextpagepng{
		width: 16px;
		height: 16px;
		margin-left: 0px;
		margin-top: 0px;
	}
	.imgpng{
		width: 141px;
		height: 130px;
		margin-top: 70px;
		margin-left: 75px;
		margin-bottom: 2%;
	}
	.yuyuejilu-text{
		margin-left: 100px;
		
	}
	.jishu-text{
		margin-left: 120px;
		opacity: 0.7;
		/* font-family: PingFangSC-Regular; */
		font-weight: 400;
		font-size: 10px;
		color: #393939;
		letter-spacing: 0;
	}
	.jishu{
		margin-top: 2%;
	}
	.yuyuejishu{
		margin-bottom: 23%;
	}
</style>